<div class="commentInput">
  <div class="title">
    <ng-container *ngIf="!info; else logged">
      <span i18n>Please post your comment after sign in</span>
      <a (click)="register()" i18n>Sign Up</a>
    </ng-container>
    <ng-template #logged>
      <ng-container *ngIf="own; else starEdit">
        <span class="star">
          <div i18n>Your Rating:</div>
          <dstore-star [rate]="own.rate"></dstore-star>
          <div>{{ own.rate }}</div>
        </span>
      </ng-container>
      <ng-template #starEdit>
        <span class="star">
          <div i18n>Rate this app:</div>
          <dstore-star [(rate)]="comment.rate" #$star [readonly]="false"></dstore-star>
          <div>{{ $star.rateHover }}</div>
        </span>
      </ng-template>

      <span
        class="myInfo"
        (click)="$dropMenu.hidden = false; $dropMenu.focus()"
        *ngIf="info.UserID | deepinid | async as info"
      >
        <span class="name">{{ info.nickname }}</span>
        <div class="dropdown-menu" tabindex="-1" #$dropMenu hidden (blur)="$dropMenu.hidden = true">
          <a (click)="logout()" i18n>Sign Out</a>
        </div>
        <img [src]="info.profile_image" class="profile min" />
      </span>
    </ng-template>
  </div>

  <div class="edit">
    <textarea
      [readOnly]="!info || own"
      [(ngModel)]="comment.content"
      (keyup.control.enter)="submitComment()"
    ></textarea>
  </div>
  <div class="fixed">
    <button class="loginBtn" *ngIf="!info; else loggedMsg" (click)="login()">
      <ng-container i18n>Sign In</ng-container>
    </button>
    <ng-template #loggedMsg>
      <div class="placeholder" *ngIf="own; else please">
        <ng-container i18n>You have posted a comment</ng-container>
      </div>
      <ng-template #please>
        <div class="placeholder" [hidden]="comment.content">
          <ng-container i18n>Post your comment here</ng-container>
        </div>
      </ng-template>
    </ng-template>
  </div>
</div>

<div class="submit" *ngIf="info">
  <ng-container [ngSwitch]="comment.error">
    <span class="submitError" *ngSwitchCase="CommentError.AllInvalid" i18n>Please rate and post your comment</span>
    <span class="submitError" *ngSwitchCase="CommentError.CommentInvalid" i18n>Please input your comment</span>
    <span class="submitError" *ngSwitchCase="CommentError.RateInvalid" i18n>Please rate</span>
    <span class="submitError" *ngSwitchCase="CommentError.Failed" i18n>Failed to submit</span>
  </ng-container>
  &nbsp;
  <button class="submitBtn" [disabled]="own" (click)="submitComment()">
    <ng-container i18n>Submit</ng-container>
  </button>
</div>
<br />

<div class="commentList" #commentRef>
  <div class="header">
    <div class="select">
      <ng-container i18n>User Comments</ng-container>
      &nbsp;
      <button [class.active]="select === CommentType.News" (click)="selectType(CommentType.News)">
        <ng-container i18n>Current Version</ng-container>
        ({{ total[CommentType.News] }})
      </button>
      <button [class.active]="select === CommentType.History" (click)="selectType(CommentType.History)">
        <ng-container i18n>History Versions</ng-container>
        ({{ total[CommentType.History] }})
      </button>
    </div>
    <div class="paginator" *ngIf="total[select] > page.size">
      <app-paginator
        [length]="total[select]"
        [size]="page.size"
        [(pageIndex)]="page.index"
        (pageIndexChange)="getList()"
      ></app-paginator>
    </div>
  </div>
  <br />
  <div class="body" *ngIf="!loading; else loadWait">
    <ng-container [ngSwitch]="true">
      <div class="empty error" *ngSwitchCase="!list">
        <ng-container i18n>Failed to load comments</ng-container>
      </div>
      <div class="empty" *ngSwitchCase="list && list.length === 0">
        <ng-container i18n>No user comments available</ng-container>
      </div>
      <ng-container *ngSwitchCase="list && list.length > 0">
        <table class="list">
          <ng-container *ngFor="let c of list">
            <tr [@myComment]="haveNewComment && c.userID === info?.UserID ? 'in' : ''">
              <td rowspan="2">
                <div class="head" *ngIf="c.userID | deepinid | async as $userInfo; else deepinInfoDefault">
                  <img [src]="$userInfo.profile_image" class="profile" />
                  <span>{{ $userInfo.nickname }}</span>
                </div>
                <ng-template #deepinInfoDefault>
                  <div class="head">
                    <img src="/assets/images/default.jpeg" class="profile default" />
                    <span>&nbsp;</span>
                  </div>
                </ng-template>
              </td>
              <td>
                <div class="top">
                  <div class="rate">
                    <dstore-star [rate]="c.rate / 2"></dstore-star>
                    &nbsp;
                    <span [style.color]="'red'">{{ c.rate / 2 }}</span> &nbsp;
                    <img src="/assets/icons/hot.svg" *ngIf="c.hot" />
                  </div>
                  <div class="right">
                    <div class="time">
                      {{ c.createTime | date: 'yyyy-MM-dd HH:mm:ss' }}
                    </div>
                    &nbsp;&nbsp;
                    <div class="like">
                      <span [class.hidden]="c.likeCount <= 0">({{ c.likeCount }})</span>
                      <img
                        class="thumbUp"
                        [class.hidden]="info && c.userID === info.UserID"
                        [class.active]="c.likeByMe"
                        (click)="thumbUpClick(c)"
                      />
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="content">{{ c.content }}</div>
              </td>
            </tr>
          </ng-container>
        </table>
      </ng-container>
    </ng-container>
  </div>
  <ng-template #loadWait> <app-wait></app-wait> </ng-template>
</div>
<div class="bottom" *ngIf="!loading">
  <a (click)="scrollToTop()" i18n>Back to top</a>
  <app-paginator
    *ngIf="total[select] > page.size"
    [(pageIndex)]="page.index"
    [length]="total[select]"
    [size]="page.size"
    (pageIndexChange)="getList(); commentTop()"
  ></app-paginator>
</div>
<br />
